<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { ITEM_TYPE } from '../../../game/data/item/type';
import type { CultivationSkillInventorySlotInfoItem } from '../../../game/model/inventory/type';
import { EVENTS, GameKernel } from '../../../game';
import { rarityTextColorClass } from '../../../utils';
import { ItemReader } from '../../../game/systems/item/reader';

const props = defineProps<{ item: CultivationSkillInventorySlotInfoItem }>();
const emit = defineEmits<{
  (e: 'close'): void;
}>();

const formState = ref({
  useCount: 1,
});

const canLearn = computed(() => {
  return props.item.canLearn;
});

function resetFormState() {
  formState.value.useCount = 1;
}

function onAddClick() {
  if (formState.value.useCount >= props.item.ins.quantity) {
    return;
  }
  formState.value.useCount += 1;
}

function onSubClick() {
  if (formState.value.useCount <= 1) {
    return;
  }
  formState.value.useCount -= 1;
}

function onSetMaxClick() {
  formState.value.useCount = props.item.ins.quantity;
}

function onStudyClick() {
  GameKernel.inst.bus.emit(
    EVENTS.INVENTORY_USE,
    props.item.ins.id,
    props.item.ins.itemId,
    formState.value.useCount
  );
}

function onSellClick() {
  GameKernel.inst.bus.emit(
    EVENTS.INVENTORY_SELL,
    props.item.ins,
    formState.value.useCount
  );
}

onMounted(() => {
  [EVENTS.INVENTORY_SELL_COMPLETED, EVENTS.INVENTORY_USE_COMPLETED].forEach(
    (eventName) => {
      GameKernel.inst.bus.on(eventName, () => {
        resetFormState();
        emit('close');
      });
    }
  );
});
</script>

<template>
  <div
    v-if="
      props.item &&
      props.item.itemConfig &&
      props.item.itemConfig.type === ITEM_TYPE.CULTIVATION_SKILL
    "
    class="cultivation-skill-detail"
  >
    <div class="flex flex-col gap-1" @click="onSetMaxClick">
      <div
        :class="[
          'text-lg',
          props.item.itemConfig.rarity &&
            rarityTextColorClass(props.item.itemConfig.rarity),
        ]"
      >
        {{ props.item.itemConfig.name }}
      </div>
      <div>
        <span>品质：</span>
        <span
          :class="
            props.item.itemConfig.rarity &&
            rarityTextColorClass(props.item.itemConfig.rarity)
          "
        >
          {{
            props.item.itemConfig.rarity &&
            ItemReader.getItemRarityName(props.item.itemConfig.rarity)
          }}
        </span>
      </div>
      <div v-if="props.item.studyConditionProgress.length">
        <div>学习要求：</div>
        <div
          v-for="(cond, index) in props.item.studyConditionProgress"
          :key="index"
          :class="{ 'line-through': cond.isMet }"
        >
          - {{ cond.description }}
        </div>
      </div>
      <div>
        <span>数量：</span>
        <span class="text-green-500">{{ props.item.ins.quantity }}</span>
        <span class="text-xs">(点击填入全部数量)</span>
      </div>
    </div>
    <div class="py-1">输入物品数量：</div>
    <div>
      <div class="pb-2">
        <a-input-number
          class="w-full"
          v-model:value="formState.useCount"
          :precision="0"
          :min="1"
          :max="props.item.ins.quantity"
        >
          <template #addonBefore>
            <minus-outlined @click="onSubClick"></minus-outlined>
          </template>
          <template #addonAfter>
            <plus-outlined @click="onAddClick"></plus-outlined>
          </template>
        </a-input-number>
      </div>
      <div class="flex items-center justify-center gap-2">
        <a-button :disabled="!canLearn" @click="onStudyClick">学习</a-button>
        <a-button
          v-if="props.item.itemConfig.canSell !== false"
          @click="onSellClick"
        >
          出售
        </a-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.cultivation-skill-detail :deep(.ant-input-number-input) {
  text-align: center;
}
</style>
